import { useState } from "react";
import styles from "./index.module.scss";
import {
  Form,
  Input,
  Picker,
  Button,
  Toast,
  FloatingBubble,
} from "antd-mobile";
import { RightOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
export default function index() {
  let nav = useNavigate();
  let [form] = Form.useForm();
  let [visible, setVisible] = useState(false);
  let [phoneArea, setPhoneArea] = useState<any>("中国大陆 +86");
  let [paramsObj, setParamsObj] = useState({
    phone: "",
    verif: "",
  });
  let columns: any = [
    [
      { label: "中国大陆 +86", value: "中国大陆 +86" },
      { label: "中国香港 +852", value: "中国香港 +852" },
      { label: "中国澳门 +853", value: "中国澳门 +853" },
    ],
  ];
  return (
    <div
      style={{ height: "100vh", background: "linear-gradient(#beede1,white)" }}
    >
      <FloatingBubble
        style={{
          "--initial-position-bottom": "24px",
          "--initial-position-right": "24px",
          "--edge-distance": "24px",
        }}
        onClick={() => {
          nav("/");
        }}
      >
        <span className="iconfont icon-zhuye" style={{ fontSize: 20 }}></span>
      </FloatingBubble>
      <Picker
        style={{
          "--title-font-size": "14px",
          "--header-button-font-size": "14px",
          "--item-font-size": "16px",
          "--item-height": "30px",
        }}
        title={"国家/地区"}
        visible={visible}
        columns={columns}
        onClose={() => {
          setVisible(false);
        }}
        onConfirm={(val) => {
          setPhoneArea(val[0]);
        }}
      />
      <img
        src="https://passport.mama.cn/wap/images/logo_mama.png"
        alt=""
        className={styles.logo}
      />
      <div className={styles.login}>
        {/* 登录输入区 */}
        <Form
          name="form"
          form={form}
          layout="horizontal"
          onFinish={(e) => {
            // console.log(e);
            Toast.show({
              icon: "success",
              content: "登录成功",
            });
            nav("/");
          }}
          footer={
            <div>
              <Button
                block
                type="submit"
                style={{
                  backgroundColor: "#5cd3b4",
                  color: "white",
                  fontSize: "20px",
                  lineHeight: "30px",
                  marginTop: "10px",
                }}
                className={styles.submit}
                size="large"
              >
                登录
              </Button>
              <p
                style={{
                  opacity: 0.5,
                  fontSize: "12px",
                  textAlign: "center",
                  marginTop: "10px",
                  marginBottom: "30px",
                }}
              >
                新号码获取验证码进行注册~
              </p>
            </div>
          }
        >
          <Form.Item>
            <div className={styles.phonearea} onClick={() => setVisible(true)}>
              <span>国家/地区</span>
              <span>{phoneArea}</span>
              <RightOutline />
            </div>
          </Form.Item>
          <Form.Item
            rules={[
              {
                required: true,
                pattern: /^[1][3,5,7,8][0-9]{9}$/,
                message: "手机号格式不正确",
              },
            ]}
            name="phone"
          >
            <div className={styles.verificate}>
              <Input
                placeholder="请输入手机号"
                style={{
                  "--font-size": "16px",
                }}
              />
            </div>
          </Form.Item>
          <Form.Item rules={[{ message: "验证码不能为空" }]} name="verif">
            <div className={styles.verificate}>
              <Input
                placeholder="请输入验证码"
                style={{
                  "--font-size": "16px",
                }}
              />
              <span
                onClick={() => {
                  form
                    .validateFields()
                    .then(() => {
                      Toast.show({
                        icon: "loading",
                        content: "发送中…",
                        afterClose: () => {
                          Toast.show({
                            icon: "success",
                            content: "发送成功",
                          });
                        },
                      });
                    })
                    .catch((err) => {
                      Toast.show({
                        icon: "fail",
                        content: "请正确输入手机号",
                      });
                    });
                }}
              >
                获取验证码
              </span>
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
